<!doctype html>
<html>

	<head>
		<meta name='viewport' content='width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'>
		<script src="vendor/three.101.min.js"></script>	
		<script src="../dist/THREEAR.js"></script>
		<title>THREE AR Basic Pattern Marker Demo</title>
		<!-- Bind window error for error handling -->
		<script>
			// window.addEventListener('error', function(event) {
			// 	alert("ERROR: " + event.message + " at " + event.filename + " : " + event.lineno + " : " + event.colno);
			// });
		</script>
		<style>
			html, body {
				height: 100%;
				width: 100%;
			}
			
			#parent, #canvas {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				margin: 0;
			}
		</style>
	</head>

	<body style='margin : 0px; overflow: hidden; font-family: Monospace;'>
		<div id="container">
			<canvas id="canvas"></canvas>
		</div>
		<script>


			// Providing our own parent element for THREE AR
			var parent = document.getElementById("container");	
			
			// Providing our own canvas element for the THREE.WebGLRenderer
			var canvas = document.getElementById("canvas");

			var renderer = new THREE.WebGLRenderer({
				canvas: canvas, 
				alpha: true
			});
			renderer.setClearColor(new THREE.Color('lightgrey'), 0)
			renderer.setSize( window.innerWidth, window.innerHeight );

			// init scene and camera
			var scene = new THREE.Scene();
			var camera = new THREE.Camera();
			scene.add(camera);

			var markerGroup = new THREE.Group();
			scene.add(markerGroup);
		
			var source = new THREEAR.Source({ 
				parent: parent, // Specify the parent
				renderer: renderer,
				camera: camera
			});

			THREEAR.initialize({ source: source }).then((controller) => {

				// add a torus knot		
				var geometry = new THREE.TorusKnotGeometry(0.3,0.1,64,16);
				var material = new THREE.MeshNormalMaterial(); 
				var torus = new THREE.Mesh( geometry, material );
				torus.position.y = 0.5
				markerGroup.add(torus);

				var geometry = new THREE.CubeGeometry(1,1,1);
				var material = new THREE.MeshNormalMaterial({
					transparent : true,
					opacity: 0.5,
					side: THREE.DoubleSide
				}); 
				var cube = new THREE.Mesh( geometry, material );
				cube.position.y	= geometry.parameters.height / 2;
				markerGroup.add(cube)

				var patternMarker = new THREEAR.PatternMarker({
					patternUrl: '../data/patt.hiro',
					markerObject: markerGroup
				});

				controller.trackMarker(patternMarker);

				// run the rendering loop
				var lastTimeMsec = 0;
				requestAnimationFrame(function animate(nowMsec){
					// keep looping
					requestAnimationFrame( animate );
					// measure time
					lastTimeMsec = lastTimeMsec || nowMsec-1000/60;
					var deltaMsec = Math.min(200, nowMsec - lastTimeMsec);
					lastTimeMsec = nowMsec;
					// call each update function
					controller.update( source.domElement );
					// cube.rotation.x += deltaMsec/10000 * Math.PI
					torus.rotation.y += deltaMsec/1000 * Math.PI
					torus.rotation.z += deltaMsec/1000 * Math.PI
					renderer.render( scene, camera );
				});

			});

		</script>
	</body>
	
</html>
